<template>
	<view style="color: #919191;overflow: hidden;font-family: 'Ginto', 'ui-sans-serif', 'system-ui', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji' 'Segoe UI Symbol' 'Noto Color Emoji'">
		<view class="top-search">
			<uni-nav-bar backgroundColor="white" :fixed="true" color="black" style="font-family: 'Ginto';" borderColor="#efefef" status-bar :title="人员总览" rightIcon="settings" @clickRight="on_sz"/>
			<view style="height: 1px;background-color: #efefef;"></view>
		</view>
		<view style="height: 40px;display: flex;flex-direction: row;">
			<scroll-view class="up-tab-view" scroll-x="true">
				<view :class="['up-tab-view-item','up-tab-view-item-active']">
					人员总览
				</view>
				<view :class="['up-tab-view-item']">
					人员安排
				</view>
			</scroll-view>
			<view style="text-align: center;line-height:40px;height:40px;width: 5em;background-color: white;color: #919191;display: flex;flex-direction: row;align-items: baseline;">
				<view style="border-left: 1px solid #ededed;width: 1px;padding-left: 6px;display: block;height: 60%;transform: translateY(20%);"></view>
				<view style="margin-top: 3px;height: 37px;">年度:{{year}}</view>
			</view>
		</view>
		<view style="height: 3px;"></view>
		<view v-if="curTab==1" class="up-table-container" :style="{ height: pageHeight + 'px' }">
			<view style="height: 160px;background-color: #fff;display: flex;border-bottom:1px solid #efefef;">
				<view style="height: 160px;width: 160px;">
					<qiun-data-charts
					  type="gauge"
					  :opts="opts"
					  :chartData="chartData"
					/>
				</view>
				<view style="flex:1;padding-left: 10%;padding-top: 15px;">
					<view style="height: 25%;"><view style="width: 5em;display: inline-block;color: #959595;font-size: 14px;">总人数：</view><view style="width: 1.5em;justify-content: center;align-items: center;display: inline-block;font-weight: bold;color: #e9ca55;">{{zrs}}</view>人</view>
					<view style="height: 25%;"><view style="width: 5em;display: inline-block;color: #959595;font-size: 14px;">非空闲：</view><view style="width: 1.5em;justify-content: center;align-items: center;display: inline-block;font-weight: bold;color: #85d565;">{{xmzrs}}</view>人</view>
					<view style="height: 25%;"><view style="width: 5em;display: inline-block;color: #959595;font-size: 14px;">空闲中：</view><view style="width: 1.5em;justify-content: center;align-items: center;display: inline-block;font-weight: bold;color: #65d5bd;">{{jjsfrs}}</view>人</view>
					<view style="height: 25%;"><view style="width: 5em;display: inline-block;color: #959595;font-size: 14px;">维护中：</view><view style="width: 1.5em;justify-content: center;align-items: center;display: inline-block;font-weight: bold;color: #85d565;">{{whzrs}}</view>人</view>
				</view>
			</view>
			<view class="table-row table-header" style="display: table;border-collapse: collapse;width: 100%;height: 60px;">
				<view class="table-cell header-cell" style="width: 66px;">姓名</view>
				<view class="table-cell header-cell" style="min-width: calc(10vw);" v-for="(h, i) in headers" :key="i" v-html="h"></view>
			</view>
			<scroll-view :scroll-x="false" :scroll-y="true" class="table-scroll" :style="{ height: (pageHeight-220) + 'px' }">
				<view class="table" style="display: table;border-collapse: collapse;width: 100%;">
					<view class="table-row" v-for="(row, rowIndex) in ygData" :key="rowIndex">
						<view class="table-cell" style="width: 66px;">
							<view class="text-ellipsis">{{ row.XM }}</view>
						</view>
						<view class="table-cell">
							<view v-if="row.XQFX>0" style="color: #197bd1;text-decoration-line: underline;min-width: calc(10vw);" @click="getRyGz(row,1)">{{row.XQFX}}</view>
							<view v-else style="color: #919191;min-width: calc(10vw);" >{{row.XQFX}}</view>
							<!--view :style="{color: row.XQFX>0?'#197bd1':'#919191',textDecorationLine: row.XQFX>0?'underline':'',minWidth: 'calc(10vw)'}" @click="getRyGz(row,1)">{{row.XQFX}}</view-->
						</view>
						<view class="table-cell">
							<view v-if="row.XTSJ>0" style="color: #197bd1;text-decoration-line: underline;min-width: calc(10vw);" @click="getRyGz(row,1)">{{row.XTSJ}}</view>
							<view v-else style="color: #919191;min-width: calc(10vw);" >{{row.XTSJ}}</view>
						</view>
						<view class="table-cell">
							<view v-if="row.BMJD>0" style="color: #197bd1;text-decoration-line: underline;min-width: calc(10vw);" @click="getRyGz(row,1)">{{row.BMJD}}</view>
							<view v-else style="color: #919191;min-width: calc(10vw);" >{{row.BMJD}}</view>
						</view>
						<view class="table-cell">
							<view v-if="row.YXWH>0" style="color: #197bd1;text-decoration-line: underline;min-width: calc(10vw);" @click="getRyGz(row,1)">{{row.YXWH}}</view>
							<view v-else style="color: #919191;min-width: calc(10vw);" >{{row.YXWH}}</view>
						</view>
					</view>
				</view>
				<view style="height:15px;"></view>
				<!-- <view style="height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));"></view> -->
			</scroll-view>
		</view>
	</view>
	<uni-popup ref="ygPopup" type="center" :mask-click="true" @maskClick="onYgPopupClose">
		<view class="popup-content">
			<view class="popup-header">
			  <text class="title">{{popRyGz.name}} 当前工作({{popRyGz.projects.length}})</text>
			</view>
			<view class="popup-body">
				<view class="member-projects">
				    <view v-for="(project,index) in popRyGz.projects" class="project-card">
						<!-- <uni-section :title="(index+1)+' '+project.name" type="line" style="align-items: flex-start;height: auto;">
							<uni-tag v-if="project.XMLX=='1'" text="大型" custom-style="background-color: #1890FF; border-color: #1890FF; color: #fff;font-size:12px;padding: 0px 6px;line-height: 20px;"/>
							<uni-tag v-if="project.XMLX=='2'" text="小型" custom-style="background-color: #ccc; border-color: #ccc; color: #fff;font-size:12px;padding: 0px 6px;line-height: 20px;"/>
							<uni-tag v-if="project.SFKJXM" text="科技" custom-style="background-color: #FAC858; border-color: #FAC858; color: #fff;font-size:12px;padding: 0px 6px;line-height: 20px;margin-left:6px;"/>
							<uni-tag v-else text="非科" custom-style="background-color: #ccc; border-color: #ccc; color: #fff;font-size:12px;padding: 0px 6px;line-height: 20px;margin-left:6px;"/>
						</uni-section>
						<view class="yg_table">
							<uni-steps :options="project.stages" active-color="#4caf50" :active="project.active" direction="column" />
						</view> -->
						{{project.name}}
					</view>
				  </view>
			</view>
			<view class="popup-footer">
			  <!-- <button class="close-btn" @click="closePopup">关闭</button> -->
			</view>
		  </view>
	</uni-popup>
		<!-- 安卓APP更新弹窗 -->
		<view class="download">
			<uni-popup ref="popup" type="center" :mask-click="false">
				<view class="upgrade">
					<view class="logo">
						<image src="../../static/update/upgrade.png" mode="widthFix" />
					</view>
					<view class="content">
						<view class="title">
							<text>{{upgrading?"正在升级":"发现新版本:"+versionStr}}</text>
						</view>
						<view class="container">
							<view class="descriptions">
								<text>{{upgrading?"正在为您下载,请耐心等待":"本次版本更新描述内容:"}}</text>
							</view>
							<view class="details" v-if="!upgrading">
								<scroll-view style="height: 120px;" scroll-y="true"><text>{{modifyContent}}</text></scroll-view>
							</view>
							<view v-else class="prpgroess">
								<progress
								:percent="downloadTime"
								active-mode="forwards"
								activeColor="red"
								active
								stroke-width="4"
								show-info
								/>
							</view>
						</view>
						<view v-if="!upgrading" class="btn-group">
							<view class="confirm" @click="upgradeEvent">
								<text>开始更新</text>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 安卓APP更新弹窗 -->
</template>

<script>
	var timerDownId = null,_self;
	import { render } from 'vue';
	import utils from '../../common/utils';
	export default {
		data() {
			return {
				pageHeight:100,
				year:new Date().getFullYear(),
				curTab:1,
				zrs:null,
				whzrs:null,
				jjsfrs:null,
				xmzrs:null,
				sjchart:null,
				popRyGz: {
				        name: "",
				        projects: [
				          {
				            name: "A",
				            stages: []
				          }
				        ],
				},
				headers: ['需求<br/>分析', '系统<br/>设计', '编码<br/>阶段', '运行<br/>维护'],
				ygData: [
					{ name: '张三', values: [1, 2, 3,4] },
					{ name: '李四', values: [1, 2, 3,4] },
					{ name: '李4', values: [1, 2, 3,4] },
				],
				//本地版本
				localVersion:'',
				xmzlMap:"",
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
			        color: ["#85d565","#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			        padding: undefined,
			        title: {
			          name: "0/21",
			          fontSize: 18,
			          color: "#2fc25b",
			          offsetY: 0
			        },
			        subtitle: {
			          name: "占用率",
			          fontSize: 14,
			          color: "#959595",
			          offsetY: 0
			        },
			        extra: {
			          gauge: {
			            type: "progress",
			            width: 20,
			            labelColor: "#666666",
			            startAngle: 0.75,
			            endAngle: 0.25,
			            startNumber: 0,
			            endNumber: 100,
			            labelFormat: "",
			            splitLine: {
			              fixRadius: -10,
			              splitNumber: 10,
			              width: 15,
			              color: "#FFFFFF",
			              childNumber: 5,
			              childWidth: 12
			            },
			            pointer: {
			              width: 24,
			              color: "#ffffff"
			            }
			          }
			        }
				}
			}
		},
		methods: {
			on_sz(){
				this.$utils.toast("设置功能暂未开放！");
			},
			ygDetail(row,colInd){
				console.log(row,colInd,JSON.parse(JSON.stringify(row)).XM)
			},
			onYgPopupClose(e){
				uni.showTabBar();
		  		this.$refs.ygPopup.close();
			},
			getRyGz: async function (row,colInd) {
				this.$utils.showLoading("人员工作获取中...");
				row = JSON.parse(JSON.stringify(row));
				this.popRyGz.name=row.XM;
				var ryID = row.ID;
				let data = {
					year:this.year,
					zgid:ryID,
					timestamp:this.$utils.getTimestamp()
				};
				let enData = this.$utils.encrypt(JSON.stringify(data),uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv);
				let postData = {
					data:""+enData+""
				}
				try {
					let res = await this.$myRequest.post_token(getApp().globalData.getRyGz,postData);   // 关键点
					this.$utils.hideLoading();
					if (res.code==0)
					{
						let a = JSON.parse(utils.decrypt(res.data,uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv));
						//console.info("getRyGz获取到的data:"+JSON.stringify(a));
						this.popRyGz.projects=a.projects;
						console.info("getRyGz获取到的data:"+JSON.stringify(this.popRyGz.projects));
						//uni.hideTabBar();
						this.$refs.ygPopup.open();
						this.$utils.hideLoading();
					}
					else if (res.code==6){
						uni.setStorageSync('isLogin',false);
						//弹出登录页面
						uni.navigateTo({
							url: '/pages/login/login',
							animationType: 'pop-in',
							animationDuration: 200
						});
					}
					else{
						this.$utils.toast("人员工作获取失败！"+res.msg);
					}
				} catch (e) {  
					this.$utils.hideLoading();
					this.$utils.toast("人员工作获取失败！"+e);           
				}
			},
			getRyzl: async function () {
				this.$utils.showLoading("人员安排获取中...");
				let data = {
					year:this.year,
					timestamp:this.$utils.getTimestamp()
				};
				let enData = this.$utils.encrypt(JSON.stringify(data),uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv);
				let postData = {
					data:""+enData+""
				}
				try {
					//console.info("initPage:"+JSON.stringify(postData));
					let res = await this.$myRequest.post_token(getApp().globalData.getRyzl,postData);   // 关键点
					//console.info("initPage获取到的:"+JSON.stringify(res));
					this.$utils.hideLoading();
					if (res.code==0)
					{
						let a = JSON.parse(utils.decrypt(res.data,uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv));
						console.info("getRyzl获取到的data:"+JSON.stringify(a));
						this.ygData = a.zgdtList;
						this.zrs=a.zrs;
						this.jjsfrs=a.jjsfrs;
						this.xmzrs=a.xmzrs;
						this.whzrs=a.whzrs;
						
						this.opts.title.name=a.xmzrs+"/"+a.zrs;
						let resx = {
							categories: [{"value":0.2,"color":"#1890ff"},{"value":0.8,"color":"#2fc25b"},{"value":1,"color":"#f04864"}],
							series: [
							  {
								name: "占用率",
								data: a.xmzrs/a.zrs
							  }
							]
						};
						this.chartData = JSON.parse(JSON.stringify(resx));
					}
					else if (res.code==6){
						uni.setStorageSync('isLogin',false);
						//弹出登录页面
						uni.navigateTo({
							url: '/pages/login/login',
							animationType: 'pop-in',
							animationDuration: 200
						});
					}
					else{
						this.$utils.toast("人员安排获取失败！"+res.msg);
					}
				} catch (e) {  
					this.$utils.hideLoading();
					this.$utils.toast("人员安排获取失败！"+e);           
				}
			},
			initPage: async function () {
				this.$utils.showLoading("数据加载中...");
				this.getRyzl();
			}
		},onLoad() {
			_self = this;
		},onReady() {

		},onPullDownRefresh() {
			setTimeout(() => {
				// this.getHomePageData()
				// uni.stopPullDownRefresh();
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				});
			}, 1000)
		},onShow() {
			_self = this;
			this.isLogin = utils.checkLogin();
			console.info("获取到的登录状态："+this.isLogin);
			if (this.isLogin){
				this.phone = uni.getStorageSync("userInfo").phone;
				this.initPage();
			}else{
				//弹出登录页面
				uni.navigateTo({
					url: '/pages/login/login?sftc=1',
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			const windowHeight = systemInfo.windowHeight; // 可使用窗口高度
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const tabBarHeight = 0;
			this.pageHeight = windowHeight - tabBarHeight - statusBarHeight - 89;
		}
	}
</script>
<style>
/* @import "~@/static/fonts/Ginto-Copilot-Upright-Variable.woff2"; */
@font-face{
	font-family:Ginto;
	font-style:normal;
	src:url('/static/fonts/Ginto-Copilot-Upright-Variable.woff2') format("woff2"),
	url(https://studiostaticassetsprod.azureedge.net/bundle-cmc/fonts/Ginto-Copilot-Upright-Variable.woff) format("woff"),
	url(https://studiostaticassetsprod.azureedge.net/bundle-cmc/fonts/Ginto-Copilot-Upright-Variable.ttf) format("ttf")
}
/* uni-app{
	overflow: hidden;
} */
page{
	background-color: #efefef;
	
	/* overflow: hidden; */
}
.top-search{
	width: 100%;
	background-color: white;
	/* position: fixed; */
	/* display: inline-block; */
	color: #292933;
	z-index: 9999;
}
.up-tab-view{
	background-color: white;
	/* width: calc(100vw - 120px); */
	height: 40px;
	white-space: nowrap;
	float: left;
	padding-left: 20px;
	flex: 1;
}
.up-tab-view-item{
	vertical-align: bottom;
	min-width: 32px;
	height: 40px;
	padding-top: 3px;
	line-height: 40px;
	display: inline-block;
	text-align: center;
	color: #8a8999;
	/* background-color: #eee; */
}
.up-tab-view-item+.up-tab-view-item{
	margin-left: 20px;
}
.up-tab-view-item-active{
	/* height: 38px; */
	display: inline-block;
	/* line-height: 36px; */
	/* line-height: 40px; */
	color: #348fe4;
	/* color: #292933; */
	/* transform: translateY(-3px); */
	/* border-bottom: 3px solid #348fe4; */
}
.up-tab-view-item-active::after{
	background-color: #348fe4;
	width: 90%;
	height: 2px;
	display: block;
	content: '';
	transform: translateY(-6px) translateX(5%);
}



.up-table-container {
	width: calc(100vw - 0px);
	/* height: calc(100vh - 290px); */
	overflow: hidden;
	position: relative;
	transform: translateY(-1px);
}

.table-scroll {
  width: 100%;
  height: 100%;
}

.table {
  display: table;
  border-collapse: collapse;
  border: 1px solid red;
}

.table-row {
  display: table-row;
  background-color: #fff;
}
.table-row:nth-child(2n+2) {
    background-color: #fafafa;
}

.table-cell {
  display: table-cell;
  padding: 10rpx;
  border: 1px solid rgba(210,210,210,0.2);
  text-align: center;
  font-size: 0.85em;
}

.header-cell {
  display: table-cell;
  background-color: #fafafa;
  /* font-weight: bold; */
  position: sticky;
  top: 0;
  z-index: 10;
  vertical-align: middle;
  font-size: 1em;
  border: none;
}
.text-ellipsis {
  white-space: nowrap;        /* 不换行 */
  overflow: hidden;           /* 隐藏超出内容 */
  text-overflow: ellipsis;    /* 超出部分用省略号表示 */
  width: 4em;                 /* 限制宽度以控制字符数 */
  display: inline-block;      /* 必须设置为块或行内块 */
}

/* 固定首列 */
.fixed-col {
  position: sticky;
  left: 0;
  z-index: 9;
}


/* 员工列表样式 */
.employee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}
.employee-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* 弹窗内容 */
.popup-content {
	max-height: 80vh;
	padding: 10px;
	background: linear-gradient(45deg, #ffffff 0%, #ffffff 100%);
	border-radius: 12px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	animation: zoomIn 0.3s ease-out;
	color: #303133;
	width: 80vw;
}

/* 弹窗头部 */
.popup-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid #fff;
}
.title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

/* 弹窗主体 */
.popup-body {
  margin: 10px 0;
  overflow-y: auto;
  max-height: 70vh;
}
.info-item {
  margin: 10px 0;
  display: flex;
}
.label {
  font-weight: bold;
  width: 80px;
}
.value {
  flex: 1;
}

/* 弹窗底部 */
.popup-footer {
  text-align: center;
  margin-top: 20px;
}
.close-btn {
  padding: 0px 20px;
  background: #fff;
  color: black;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 动画效果 */
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.member-projects {
  font-family: Arial, sans-serif;
  padding: 0rpx 20rpx 20rpx 20rpx;
}

.title {
  font-size: 36rpx;
  text-align: center;
  color: #333;
}

.project-card {
  background-color: #f9f9f9;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.project-title {
  font-size: 32rpx;
  color: #555;
  margin-bottom: 10rpx;
}

.yg_table {
  width: 100%;
  border-collapse: collapse;
}

.yg_table-header, .yg_table-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.table-header-item, .table-row-item {
  flex: 1;
  font-size: 28rpx;
  color: #666;
}

.progress-bar {
  background-color: #e0e0e0;
  border-radius: 8rpx;
  height: 20rpx;
  margin: 5rpx 0;
  position: relative;
  flex: 1;
}

.progress-fill {
  background-color: #4caf50;
  height: 100%;
  transition: width 0.4s ease;
}

	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}
	
	.uni-section {
	    position: relative;
	    display: flex;
	    margin-top: 0px !important;
	    flex-direction: row;
	    align-items: center;
	    padding: 0 10px;
	    height: 50px;
	    background-color: #f8f8f8;
	    font-weight: normal;
	}
 
	.chart-container {
		height: 80vh;
	}
</style>
